<template>
	<yd-layout id='study' class=''>
		<div slot='top' class="header">
			<div class="header_label">学习</div>
			<div class="header_left">
				<img src="../../assets/search.png" alt="" />
				<div @click="$router.push({name:'search'})" class="input_btn">搜索你想要的~</div>
				<!--<input type="text" placeholder="搜索你想要的~" />-->
			</div>
			<div v-if="true" class="header_right" @click="$router.push({name:'message'})">
				<i v-if="unreadTotal>0"></i>
				<img src="../../assets/massage.png" alt="" />
			</div>
		</div>
		<div class="content">
			<div class="course_video">
				<div class="title">
					<div class="live_title">
						<div class="live_left">视频课程</div>
						<div v-if="false" class="live_right">查看更多</div>
					</div>
					<div class="title_label">分步学习，事业技巧尽掌握</div>
				</div>

				<div class="img_nav">
					<img @click="goNextPage('bd_index')" src="../../assets/nav_img_1.png" alt="" />
					<img @click="goNextPage('allClass','2000')" src="../../assets/nav_img_2.png" alt="" />
				</div>
				<div class="img_nav">
					<img @click="goNextPage('allClass','3000')" src="../../assets/nav_img_3.png" alt="" />
					<img @click="goNextPage('courseClassical')" src="../../assets/nav_img_4.png" alt="" />
				</div>
			</div>

			<!--<div class="class_nav">
				<div class="nav_item" @click="goClassPage('allClass',item.id)" v-for="item in cateList">{{item.title}}</div>
			</div>-->

			<div class="title">
				<div class="live_title">
					<div class="live_left">在线直播</div>
					<div v-if="false" class="live_right">查看更多</div>
				</div>
				<div class="title_label">领袖、大咖面对面答疑解惑</div>
			</div>

			<div class="live_list" style="border-bottom: .2rem solid #FAFAFA;">
				<yd-infinitescroll v-show='liveList.length>0' :callback="getLiveList" ref="infinitescrollDemo">
					<div slot="list" class="list" v-for="item in liveList" @click="goNext(item)">
						<div class="list_header">
							<div class="list_header_top">
								<img class="list_header_top_img" :src="item.avatar" alt="" />
								<span class="c_size_30_42 c_text_ellipsis_1">{{item.nick_name}}</span>
							</div>
							<div v-if="item.status===0" class="list_header_bottom" style="background: #35BF7E;">
								<img class="list_header_bottom_img" src="../../assets/playGif.gif" alt="" />
								<span>直播中</span>
							</div>
							<div v-else-if="item.status===1" class="list_header_bottom" style="background: #FFA900;">
								<span>课程预告</span>
							</div>
							<div v-else class="list_header_bottom" style="background: #CCCCCC;">
								<span>回&nbsp;放</span>
							</div>
						</div>
						<div class="list_title c_text_ellipsis_2 c_size_34_48">{{item.title}}</div>
						<div class="list_bottom ">
							<div class="list_bottom_password">
								<span v-if="item.status!==1">{{item.member_total}}人观看</span>
								<span v-else class="c_text_ellipsis_1">直播时间：{{item.newTime}}</span>
								<div v-if="item.bpass==1&&item.member==1" class="password_paly" style="color: #35BF7E;">会员加密直播</div>
								<div v-else-if='item.member==1' class="password_paly" style="color: #35BF7E;">会员直播</div>
								<div v-else-if="item.bpass==1" class="password_paly" style="color: #35BF7E;">加密直播</div>
							</div>
						</div>
					</div>
					<!-- 数据全部加载完毕显示 -->
					<span slot="doneTip">没有更多数据了~~</span>

					<!-- 加载中提示，不指定，将显示默认加载中图标 -->
					<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>
				<NoList v-show='liveList.length==0'>
					<img slot='img' src="../../assets/kong_3.png" alt="" />
				</NoList>

			</div>

			<div v-if="false" style="border-bottom: .2rem solid #FAFAFA;">
				<div class="live_title">
					<div class="live_left">专栏网课</div>
					<div class="live_right" @click="goLiveListCourse">查看更多</div>
				</div>

				<div class="course_list">
					<IndexCourseList @goCourseClass='goCourseClass' slot="list" :dataList='courseDataList'></IndexCourseList>
				</div>
			</div>

			<template v-if="false">
				<div class="title">
					<div class="live_title">
						<div class="live_left">推荐课程</div>
						<!--@click="$router.push({name:'audioList'})"-->
						<div @click="inAbatch" class="live_right">
							<img src="../../assets/study_1.png" alt="" />
							<span>换一批</span>
						</div>
					</div>
				</div>

				<div class="audio_list">
					<VideoList :goVideoPlay='goVideoPlay' :dataList='videoList' :member='member' :class='indexVideoList'></VideoList>
				</div>
			</template>

		</div>
		<Footer slot='bottom' activeStr='study'></Footer>
		<!--输入密码-->
		<yd-popup v-model="showPop" position="center" :close-on-masker='false'>
			<div class="pop_nike_name">
				<div class="title c_size_34_48">该场直播已加密</div>
				<div class="pop_nike_name_input">
					<input placeholder="请输入六位直播密码" oninput="if(value.length>6)value=value.slice(0,6)" type="text" v-model="passwordNum" />
				</div>
				<ul class="c_size_34_48">
					<li @click="showPop=false">取消</li>
					<li @click="postPassword()">确定</li>
				</ul>
			</div>
		</yd-popup>

		<yd-popup v-model="showPopToast" position="bottom" width="100%" :close-on-masker='false'>
			<div class="pop_content">
				<div class="pop_top">
					<div class="pop_title">请输入听课密码</div>
					<div class="pop_label">*听课密码请联系领导人获取*</div>

					<div class="pop_input_f">
						<!-- oninput="if(value.length>16)value=value.slice(0,16)"-->
						<input class="pop_input" v-model="passwordNumCourse" type="text" placeholder="输入密码" />
					</div>
				</div>
				<div class="pop_btn">
					<div class="pop_btn_left" @click="showPopToast=false">取消</div>
					<div class="pop_btn_right" @click="postPasswordCourse">确定</div>
				</div>
			</div>
		</yd-popup>
		<yd-backtop></yd-backtop>
	</yd-layout>
</template>

<script>
	import IndexCourseList from '../../components/IndexCourseList/IndexCourseList.vue'
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import Footer from '../../components/Footer/Footer.vue'
	import VideoList from '../../components/VideoList/VideoList.vue'
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	export default {
		components: {
			[BackTop.name]: BackTop,
			[Footer.name]: Footer,
			[VideoList.name]: VideoList,
			[Popup.name]: Popup,
			[IndexCourseList.name]: IndexCourseList,
			[InfiniteScroll.name]: InfiniteScroll,
		},
		data() {
			return {
				member: true,
				indexVideoList: 'index_video_list',
				liveList: [], //直播预告列表
				videoList: [], //视频列表
				cateList: [], //分类列表
				listObj: {},
				mineObj: {},
				showPop: false,
				passwordNum: '',
				unreadTotal: 0,
				pageNum: 1,
				pageNum_live: 1,
				diaLogNum: 0,

				courseDataList: [],
				showPopToast: false,
				passwordNumCourse: '',
				courseId: '',
			}
		},
		created() {},
		watch: {
			diaLogNum: function(val, oldVal) {
				if(val >= 2) {
					//this.$dialog.loading.close();
				}

			}
		},
		computed: {

		},
		mounted() {
			document.title = '学习'
			this.getMine();
			//获取首页
			this.getVideoIndex();
			//获取直播列表
			this.getLiveList();
			//网栏专课
			//this.getIndexCourseList();
			//获取分类
			//this.getCates()
		},
		methods: {
			getLiveList() {
				this.$root.ajax({
					name: 'live/lst',
					params: {
						page: this.pageNum_live,
						count: 10,
					},
				}).then((d) => {
					for(let a = 0; a < d.data.live_list.length; a++) {
						d.data.live_list[a].newTime = this.$root.getDate(new Date(d.data.live_list[a].start_time * 1000), {
							str: '-',
							allTime: 2
						})
					}
					this.liveList = [...this.liveList, ...d.data.live_list];

					if(this.liveList.length >= d.data.live_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum_live++;
				})
			},
			goLiveListCourse() {
				this.$router.push({
					name: 'liveListCourse'
				})
			},
			goLiveList() {
				this.$router.push({
					name: 'liveList'
				})
			},
			getIndexCourseList() {
				this.$root.ajax({
					name: 'course/lst',
					params: {
						page: 1,
						count: 2,
					},
				}).then((d) => {

					for(let a = 0; a < d.data.course_list.length; a++) {
						d.data.course_list[a].price = this.$root.setMoneyZero(d.data.course_list[a], 'price')
					}
					this.courseDataList = [...this.courseDataList, ...d.data.course_list];

				})
			},
			postPasswordCourse() {
				if(!this.passwordNumCourse) {
					this.$dialog.toast({
						mes: '请输入密码',
						timeout: 1500
					});
					return
				}
				this.$root.ajax({
					name: 'course/pwd',
					params: {
						id: this.courseId,
						password: this.passwordNumCourse
					}
				}).then((d) => {
					this.$router.push({
						name: 'courseClass',
						query: {
							id: this.courseId
						}
					})
				})
			},
			//去课程目录
			goCourseClass(item) {
				//item.is_require_pwd == 1 && item.is_input_pwd != 1
				if(item.is_require_pwd == 1 && item.is_input_pwd != 1) {
					this.courseId = item.id
					this.passwordNumCourse = '';
					this.showPopToast = true
					return
				}
				this.$router.push({
					name: 'courseClass',
					query: {
						id: item.id
					}
				})
			},
			inAbatch() {
				this.$root.ajax({
					name: 'video/rand',
					type: 'get',
					params: {

					}
				}).then((d) => {
					this.videoList = d.data;
				})
			},
			//请求首页接口
			getVideoIndex() {
				this.$root.ajax({
					name: 'video/index',
					type: 'get',
					closeAllLoading: false,
					params: {
						pid: 0
					}
				}).then((d) => {
					this.diaLogNum++;
					if(d.data.cate_list.length >= 8) {
						this.cateList = d.data.cate_list.splice(0, 7);
						this.cateList.push({
							id: 0,
							title: '全部课程'
						})
					} else {
						this.cateList = d.data.cate_list
					}

					//推荐课程
					this.videoList = d.data.video_list;
					//消息条数
					this.unreadTotal = d.data.unread_total
				})
			},
			getCates() {
				this.$root.ajax({
					name: 'video/cates',
					type: 'get',
					closeAllLoading: false,
					params: {
						pid: 0
					}
				}).then((d) => {
					this.diaLogNum++;
					if(d.data.length >= 8) {
						this.cateList = d.data.splice(0, 7);
						this.cateList.push({
							id: 0,
							title: '全部课程'
						})
					} else {
						this.cateList = d.data
					}
				})
			},
			goClassPage(str, id) {
				this.$router.push({
					name: str,
					query: {
						id: id
					}
				})
			},
			goNextPage(str, pid) {
				if(str == 'allClass') {
					this.$router.push({
						name: str,
						query: {
							id: 0,
							pid: pid
						}
					})
				} else {
					this.$router.push({
						name: str
					})
				}

			},
			goNext(item) {
				//清空密码
				this.listObj = {};

				if(item.status === 0) {
					//判断是否需要密码
					//非（视频需要会员，且已经开通会员）
					if(item.member == 1) {
						if(this.mineObj.member_status != 1) {
							//弹出开通会员框
							this.$dialog.confirm({
								title: '温馨提示',
								mes: '该场直播需要开通会员权限才能观看',
								opts: [{
										txt: '取消',
										color: '#999999',
										callback: () => {

										},
									},
									{
										txt: '开通会员',
										color: '#35BF7E',
										callback: () => {
											this.$router.push({
												name: 'vipOpen'
											})
										}
									},
								]
							});
							return
						}
					}

					//判断是否需要密码
					if((item.bpass == 1)) {
						//弹出密码框
						this.showPop = true;
						this.listObj = Object.assign({}, this.listObj, item)
						this.passwordNum = ''
						return
					}
					this.$router.push({
						name: 'liveRoom',
						query: {
							id: item.id,
						}
					})
				} else {
					this.$router.push({
						name: 'live',
						query: {
							id: item.id,
							kind: item.status,
						}
					})
				}
			},
			//输入密码
			postPassword() {
				if(this.passwordNum.length == 6) {
					if(this.passwordNum == this.listObj.password) {
						if(this.listObj.status === 0) {
							this.$router.push({
								name: 'liveRoom',
								query: {
									id: this.listObj.id,
									password: this.listObj.password
								}
							})
						} else {
							this.$router.push({
								name: 'live',
								query: {
									id: item.id,
									kind: this.listObj.status,
								}
							})
						}
					} else {
						this.$dialog.toast({
							mes: '请输入正确的六位密码',
							timeout: 1500
						});
					}
				} else {
					this.$dialog.toast({
						mes: '请根据提示正确输入',
						timeout: 1500
					});
				}
			},
			//获取个人信息
			getMine() {
				this.$root.ajax({
					name: 'my',
					type: 'get',
					closeAllLoading: false,
					params: {}
				}).then((d) => {
					this.mineObj = Object.assign({}, this.mineObj, d.data)
					this.diaLogNum++
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './study.scss';
	.yd-loading {
		background: #505050 !important;
	}
</style>